<template>

  <div id="aside">
    <el-aside width="collapse">
<!--       :collapse="isCollapse" class="el-menu-vertical" 动态控制导航菜单的收起与展开  router：让index作为 path 进行路由跳转 -->
      <el-menu
          :collapse="isCollapse"
          :default-active="$route.path"
          active-text-color="#fff"
          background-color="#191A23FF"
          class="el-menu-vertical"
          router
          :unique-opened="true"
          text-color="#ccc"
          @select="selectMenu"
      >
        <div style="height: 60px; line-height: 60px; text-align:center; vertical-align:middle">
          <img alt="" src="~@/assets/logo.jpg" style="width: 30px;vertical-align:middle; position: relative; bottom: 3px ;  ">
          <span v-show="logoTextShow" style="font-weight: 800; color: white ; font-size: 20px; margin-left: 8px; cursor: pointer" @click="toMain">家谱管理系统</span>
        </div>
        <div v-for="item in menus" :key="item.id">
          <div v-if="item.path">
            <el-menu-item :index="item.path">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </div>
          <div v-else>
            <el-submenu :index="item.id + ''" >
              <!-- 插槽 插入一级导航标题 -->
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <!-- 二级导航标题 -->
              <div v-for="subItem in item.children" :key="subItem.id">
                <el-menu-item :index="subItem.path"><i :class="subItem.icon"></i>{{ subItem.name }}</el-menu-item>
              </div>
            </el-submenu>
          </div>
        </div>
<!--        <el-menu-item index="/main/home"><i class="el-icon-s-home"></i><span slot="title">主页</span></el-menu-item>
        <el-submenu index="2" >
          &lt;!&ndash; 插槽 插入一级导航标题 &ndash;&gt;
          <template slot="title"><i class="el-icon-s-tools"></i><span>系统管理</span></template>
          &lt;!&ndash; 二级导航标题 &ndash;&gt;
          <el-menu-item-group>
            <el-menu-item index="/main/system/userLog">用户列表</el-menu-item>
            <el-menu-item index="/main/system/manage">管理列表</el-menu-item>
            <el-menu-item index="/main/system/role">角色列表</el-menu-item>
            <el-menu-item index="/main/system/menu">菜单列表</el-menu-item>
            <el-menu-item index="/main/system/power">权限列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="3" >
          &lt;!&ndash; 插槽 插入一级导航标题 &ndash;&gt;
          <template slot="title"><i class="el-icon-s-custom"></i><span>教师管理</span></template>
          &lt;!&ndash; 二级导航标题 &ndash;&gt;
          <el-menu-item-group>
            <el-menu-item index="/main/teacher/info"><i class="el-icon-s-custom"></i><span slot="title">教师列表</span></el-menu-item>

          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          &lt;!&ndash; 插槽 插入一级导航标题 &ndash;&gt;
          <template slot="title">
            <i class="el-icon-edit-outline"></i><span>班级管理</span>
          </template>
          &lt;!&ndash; 二级导航标题 &ndash;&gt;
          <el-menu-item-group>
            <el-menu-item index="/main/class/info">
              <i class="el-icon-s-management"></i>
              <span slot="title">班级列表</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          &lt;!&ndash; 插槽 插入一级导航标题 &ndash;&gt;
          <template slot="title">
            <i class="el-icon-user-solid"></i><span>学生管理</span>
          </template>
          &lt;!&ndash; 二级导航标题 &ndash;&gt;
          <el-menu-item-group>
            <el-menu-item index="/main/student/info">
              <i class="el-icon-user-solid"></i>
              <span slot="title">学生列表</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="6">
          &lt;!&ndash; 插槽 插入一级导航标题 &ndash;&gt;
          <template slot="title">
            <i class="el-icon-s-cooperation"></i><span>课程管理</span>
          </template>
          &lt;!&ndash; 二级导航标题 &ndash;&gt;
          <el-menu-item-group>
            <el-menu-item index="/main/course/info">课程列表</el-menu-item>
            <el-menu-item index="/main/course/choose">选课中心</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="7">
          &lt;!&ndash; 插槽 插入一级导航标题 &ndash;&gt;
          <template slot="title">
            <i class="el-icon-s-cooperation"></i><span>成绩管理</span>
          </template>
          &lt;!&ndash; 二级导航标题 &ndash;&gt;
          <el-menu-item-group>
            <el-menu-item index="/main/score/info">我的成绩</el-menu-item>
            <el-menu-item index="/main/score/inputScore">录入成绩</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="8">
          &lt;!&ndash; 插槽 插入一级导航标题 &ndash;&gt;
          <template slot="title">
            <i class="el-icon-edit-outline"></i><span>个人中心</span>
          </template>
          &lt;!&ndash; 二级导航标题 &ndash;&gt;
          <el-menu-item-group>
            <el-menu-item index="/main/personal/updateInfo">
              <i class="el-icon-user"></i>个人资料</el-menu-item>
          </el-menu-item-group>
        </el-submenu>-->
      </el-menu>
    </el-aside>

  </div>


</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      logoTextShow: true,
      isCollapse: false, //导航栏默认为展开
      userRole :'',
      menus : localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus") ): [],
    }
  },
  methods:{
    toMain() {
      this.$router.push('/main/home')
    },
    selectMenu(item){
    }
  },
  mounted() {
    this.$bus.$on("isCollapse", (...data) => {
      this.isCollapse = data[0]
      this.logoTextShow = data[1]
    });
  },
  beforeDestroy() {
    this.$bus.$off("isCollapse");
  },

}
</script>
<style scoped>


.el-aside {
  background-color : #191A23FF !important;
  color: #333;
  height: 100vh;
}
 .el-aside.el-submenu:hover {
    color : white !important;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 260px;
}
 .el-menu {
  border-right-width: 0;
}
/* 改变elementui 侧边栏移入颜色 */
.el-menu-item:hover{
  background: #191A23FF!important;
  color: #fff!important;
}
/deep/ .el-submenu__title:hover {
  background: #191A23FF!important;
  color: #fff!important;
}
.el-menu-item.is-active {
  background: #1c88cf!important;
  color: #fff!important;
}
 .el-submenu__title.is-active {
  background: #1c88cf!important;
  color: #fff!important;
}

</style>
